<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <style>
        tr {
            vertical-align: middle;
            text-align: center;
        }
    </style>

</head>

<body>
    <!-- 主体区域 -->
    <div class="container mt-5">
        <h4>用户管理</h4>
        <hr>
        <!-- 用户信息 -->
        <div class="mb-3 d-flex justify-content-start">
            <!-- 查询 -->
            <form class="row gx-3 gy-2 align-items-center">
                <div class="col-6">
                    <label class="visually-hidden" for="specificSizeInputName">输入姓名查找</label>
                    <input type="text" class="form-control" id="nameVal" placeholder="输入姓名查找">
                </div>
                <div class="col-6">
                    <input type="button" value="查找" class="btn btn-primary searchbtn">
                </div>
            </form>
        </div>
        <!-- 用户信息列表 -->
        <h4>用户信息列表</h4>
        <div class="col-12">
            <table class="table table-bordered">
                <thead id="thead_">
                    <tr>
                        <th scope="col">ID</th>
                        <th scope="col">姓名</th>
                        <th scope="col">手机号</th>
                    </tr>
                </thead>
                <tbody class="user-list">
                    <tr>
                        <td scope="col">123</td>
                        <td scope="col">一</td>
                        <td scope="col">73286711111</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        select();
        // 按照姓名查询
        $('.searchbtn').click(() => {
            $.ajax({
                method: 'get',
                url: 'http://localhost:3000/user/selectbyname',
                data: {
                    "username": $('#nameVal').val(),
                },
                success: function (data) {
                    console.log(data)
                    render(data.data)
                },
                error: function (e) {
                    console.log(JSON.stringify(e));
                }
            })

        })
        // 查询所有数据
        function select() {
            $.ajax({
                method: 'get',
                url: 'http://localhost:3000/user/select',
                success: function (data) {
                    console.log(data)
                    render(data.data)
                },
                error: function (e) {
                    console.log(JSON.stringify(e));
                }
            })
        }
        // 渲染
        function render(data) {
            let str = ''
            data.forEach((item, index) => {
                str += `<tr>
                    <td scope="col">${item.id}</td>
                    <td scope="col">${item.username}</td>
                    <td scope="col">${item.phone}</td>
                </tr>`
            })
            $('.user-list').html(str)
        }


    </script>



</body>

</html>